<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Memleft active="memChangepwd"/>
    </div>
    <div class="member_right">
      <div class="changepwd">
        <el-form ref="form" :model="form" :rules="rules" label-width="250px">
          <el-form-item label="选择验证身份方式">
            <el-radio-group v-model="form.resource">
              <el-radio label="1">手机验证</el-radio>
              <!-- <el-radio label="2">密码验证</el-radio> -->
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="手机号">
            <el-input v-model="form.mobileNum" style="width: 380px"></el-input>
          </el-form-item> -->
          <div v-if="form.resource == 1">
            <el-form-item label="短信校验码" prop="smsCode">
              <el-input v-model="form.smsCode" style="width: 200px"></el-input>
              <el-button :disabled="0 != sendCode" style="margin-left: 10px;" class="yzmbtn" type="success" @click="sendSms">{{sendCode == 0 ? '获取检验码' : sendCode + '秒后再次获取'}}</el-button>
            </el-form-item>
          </div>
          <div v-if="form.resource == 2">
            <el-form-item label="旧密码">
              <el-input type="password" v-model="form.oldPassword" style="width: 380px"></el-input>
            </el-form-item>

          </div>
          <el-form-item label="新密码" prop="password">
            <el-input  type="password"  v-model="form.password" style="width: 380px"></el-input>
          </el-form-item>
          <el-form-item label="重复新密码" prop="password2">
            <el-input  type="password"  v-model="form.password2" style="width: 380px"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="capCode">
            <el-input v-model="form.capCode" style="width: 240px; float: left;"></el-input>
            <div class="yzms" style="float: left; margin-left: 20px;"><Captch height="40px" @update="captchValue"></Captch></div>
          </el-form-item>
          <el-form-item style="margin-top: 60px">
            <el-button type="primary" class="submintbtn" style="width: 380px" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Memleft from '../../components/memleft'
import Captch from '../../components/captch'
import { updatePassword, sendMessage } from '../../assets/js/domains'
import util from '../../assets/js/util'

export default {
  name: 'MemChangepwd',
  components: { Memleft, Captch },
  directives: {},
  data: function () {
    return {
      password2: '',
      userInfo: {},
      form: {
        resource: '1',
        account: '',
        password: '',
        password2: ''
      },
      rules: {
        smsCode: [
          {
            required: true,
            message: '请填写短信校验码',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请填写新密码',
            trigger: 'blur'
          }
        ],
        password2: [
          {
            required: true,
            message: '请重复填写新密码',
            trigger: 'blur'
          }
        ],
        verifyCode: [
          {
            required: true,
            message: '请填写验证码',
            trigger: 'blur'
          }
        ]
      },
      smsCode: '',
      sendCode: 0,
      capCode: ''
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    const userInfo = JSON.parse(localStorage.getItem('md_userInfo'))
    this.form = Object.assign(this.form, { mobileNum: userInfo.mobileNum, account: userInfo.account })
  },
  computed: {},
  mounted: function () {

  },
  methods: {
    onSubmit: function () {
      const _this = this
      this.$refs.form.validate(function (valid) {
        if (valid) {
          if (_this.smsCode != _this.form.smsCode) {
            _this.$alert('短信校验码不正确', '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
            return false
          }
          if (_this.capCode != _this.form.capCode) {
            _this.$alert('验证码校验不正确', '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
            return false
          }

          if (!_this.form.password) {
            _this.$alert('新密码不能为空', '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
            return false
          } else {
            var myreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
            var re = new RegExp(myreg)
            if (!re.test(_this.form.password)) {
              _this.$alert('请输入6-16位英文与数字组合', '提示', {
                confirmButtonText: '确定',
                callback: function () {
                }
              })
              return false
            }
          }

          if (!_this.form.password2) {
            _this.$alert('重复新密码不能为空', '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
            return false
          }

          if (_this.form.password2 != _this.form.password || !_this.form.password) {
            _this.$alert('两次密码输入不一致', '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
            return false
          }
          const params = Object.assign({}, _this.form)
          params.password = util.strEncode(params.password)
          delete params.password2
          updatePassword(params).then(function (res) {
            if (res.code == 200) {
              _this.form = {
                resource: '1',
                account: '',
                password: ''
              }
              _this.$alert('更新成功', '提示', {
                confirmButtonText: '确定',
                callback: function () {
                  window.location.href = 'member.html'
                }
              })
            } else {
              _this.$alert('更新失败', '提示', {
                confirmButtonText: '确定',
                callback: function () {
                }
              })
            }
          })
        }
      })
    },
    getpost: function () {
    },
    sendSms: function () {
      var _this = this
      sendMessage({ phoneNumber: this.form.mobileNum }).then(function (res) {
        if (res.code == 200) {
          _this.sendCodeInterval()
          _this.smsCode = res.data
        }
      })
    },
    sendCodeInterval: function () {
      this.sendCode = 60
      var _this = this
      var intervalHanlder = setInterval(function () {
        _this.sendCode -= 1
        if (_this.sendCode <= 0) {
          clearInterval(intervalHanlder)
        }
      }, 1000)
    },
    captchValue: function (e) {
      this.capCode = e
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/member";
</style>
